import Dialog from ".";
import { WeaFormItem, WeaInput, WeaUpload, WeaZmage, WeaImageCropper,WeaLocaleProvider } from 'ecCom';
import { observer } from "mobx-react";
import { Button } from 'antd';
import DropSelect from "../common/drop-select";
import { loadSpread, releaseSpread } from "../../utils/loadSpread";
const getLabel = WeaLocaleProvider.getLabel;

import './addExcelTemplate.less';
const Name = observer(({ field }) => {
    const { label = getLabel(502690,'名称'), value, onChange } = field.bind();
    const labelCol = 7;
    const fieldCol = 16;
    const defaultLabel = getLabel(502690,'名称');
    return (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@9z58eh`}
            className="wea-form-cell"
            label={label ? label : defaultLabel}
            labelCol={{ span: `${labelCol}` }}
            wrapperCol={{ span: `${fieldCol}` }}>
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@whm07t`} style={{ width: 200 }} value={value} onChange={onChange} viewAttr={3}></WeaInput>
        </WeaFormItem>
    )
});

const GroupName = observer(({ field }) => {
    const { label = getLabel('502705','分组'), value, onChange } = field.bind();
    const options = field.get('options');
    const labelCol = 7;
    const fieldCol = 16;
    const defaultLabel = getLabel('502705','分组');
    return (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@cvmoo4`}
            className="wea-form-cell"
            label={label ? label : defaultLabel}
            labelCol={{ span: `${labelCol}` }}
            wrapperCol={{ span: `${fieldCol}` }}>
            <DropSelect ecId={`${this && this.props && this.props.ecId || ''}_DropSelect@ghxikg`} value={value} onChange={onChange} options={options}></DropSelect>
        </WeaFormItem>
    )
});

const ExcelFile = observer(({ field, onChange: propsOnChange, onCreateImg, fileDatas }) => {
    const { label = getLabel('502706','选择Excel文件'), value, onChange, valueSpan } = field.bind();
    const labelCol = 7;
    const fieldCol = 16;
    const defaultLabel = getLabel('502706','选择Excel文件');
    const change = (oldFields, newFields) => {
        const [file] = newFields;
        if (file) {
            const fileInstance = file.getNative();
            const excelIO = new GC.Spread.Excel.IO();
            excelIO.open(
                fileInstance,
                json => {
                    onChange(JSON.stringify(json));
                    if (propsOnChange) {
                        propsOnChange(fileInstance.name);
                    }
                    onCreateImg(json);
                },
                (error) => {
                    message.error(error);
                }
            );
        }
    }
    return (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@atykyd`}
            className="wea-form-cell"
            label={label ? label : defaultLabel}
            labelCol={{ span: `${labelCol}` }}
            wrapperCol={{ span: `${fieldCol}` }}>
            <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@m9xn99`}
                className="edc-toolbar-item"
                uploadUrl="."
                category='string'
                maxUploadSize={0}
                maxFilesNumber={1}
                limitType='xlsx'
                autoUpload={false}
                getShowListDatas={change}
                style={{ float: 'left' }}
                datas={fileDatas.slice()}
                maxFilesNumber={1}
            />
        </WeaFormItem>
    )
});

const Img = observer(({ field, visible, showEditor }) => {
    const { label = getLabel('502707','预览图片'), value, onChange } = field.bind();
    const labelCol = 7;
    const fieldCol = 16;
    const defaultLabel = getLabel('502707','预览图片');
    return (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0gns41`}
            className="wea-form-cell img"
            label={label ? label : defaultLabel}
            labelCol={{ span: `${labelCol}` }}
            wrapperCol={{ span: `${fieldCol}` }}>
            <WeaZmage ecId={`${this && this.props && this.props.ecId || ''}_WeaZmage@2xspb4`} src={value} style={{ width: '100%' }} />
            <i className="icon-coms-edit cut" onClick={showEditor}></i>

        </WeaFormItem >
    );
});

const Editor = observer(({ store, onCrop, onCancel }) => {
    const { imgEditorVisible: visible } = store;
    const field = store.form.$('img');
    const { value, onChange } = field.bind();
    let cropper;
    const crop = () => {
        if (typeof cropper.getCroppedCanvas() === 'undefined') {
            return;
        }
        const canvas = cropper.getCroppedCanvas();
        onCrop(canvas.toDataURL());
    }
    return (
        <div className="edc-excel-template-img-editor" style={{ visibility: visible ? 'visible' : 'hidden' }}>
            <WeaImageCropper ecId={`${this && this.props && this.props.ecId || ''}_WeaImageCropper@74hatv`}
                ref={ref => cropper = ref}
                src={value}
                aspectRatio={1 / 1}
                style={{ width: '100%', height: "100%" }}
            />
            <div className="opts">
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@p9kw10`} type="primary" style={{ marginRight: 10 }} onClick={crop}>{getLabel('826', '确定')}</Button>
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@isejbt`} type="primary" onClick={onCancel}>{getLabel(31129,'取消')}</Button>
            </div>
        </div>
    )
})

@observer
export default class AddExcelTemplateDialog extends React.Component {
    componentWillMount() {
        this.t = loadSpread();
    }
    componentWillUnmount() {
        releaseSpread(this.t);
        const { store } = this.props;
        store.hideImgEditor();
        store.form.reset();
        if (this.editor) {
            ReactDOM.unmountComponentAtNode(this.editor);
            document.body.removeChild(this.editor);
        }

    }
    showImgEditor = () => {
        const { store } = this.props;
        if (!this.editor) {
            this.editor = document.createElement('div');
            document.body.appendChild(this.editor);
            this.editor.style.height = '100%';
            this.editor.className = "";
            ReactDOM.render(<Editor ecId={`${this && this.props && this.props.ecId || ''}_Editor@p20r4x`} store={store} onCrop={this.onCrop} onCancel={store.hideImgEditor}></Editor>, this.editor);
        }
        store.showImgEditor();
    }
    onCrop = (img) => {
        const { store } = this.props;
        const { onChange } = store.form.$('img').bind();
        onChange(img);
        store.hideImgEditor();
    }
    render() {
        const { store } = this.props;
        return (
            <Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@xoo9jn`}
                dialog={store}
            >
                <div className="edc-excel-template-create wea-search-group">
                    <Name ecId={`${this && this.props && this.props.ecId || ''}_Name@b7gnyx`} field={store.form.$('name')}></Name>
                    <GroupName ecId={`${this && this.props && this.props.ecId || ''}_GroupName@pe6ejp`} field={store.form.$('groupName')}></GroupName>
                    <ExcelFile ecId={`${this && this.props && this.props.ecId || ''}_ExcelFile@zbz8zz`} field={store.form.$('excelFile')} fileDatas={store.fileDatas} onChange={store.changeNameWhenEmpty} onCreateImg={this.createImg}></ExcelFile>
                    <Img ecId={`${this && this.props && this.props.ecId || ''}_Img@k4zoeb`} field={store.form.$('img')} showEditor={this.showImgEditor} ></Img>
                </div>
                <div className="edc-excel-template-workbook-wrapper" ref={ref => this.container = ref}></div>
            </Dialog>
        )
    }
    createImg = (json) => {
        if (this.container) {
            const { store } = this.props;
            const workbook = new GC.Spread.Sheets.Workbook(this.container);
            workbook.fromJSON(json, false);
            const img = this.container.querySelector('#vp_vp').toDataURL('png/image');
            const { onChange } = store.form.$('img').bind();
            onChange(img);
            this.container.innerHTML = "";
        }
    }
}
